<template>
    <div class="container" @click="goSwingCard">
        <div class="initTop">
            <div class="topImg" v-show="isClick"><img :src="logoImg" alt=""></div>
            <div class="topTime" v-show="isClick">
                <div class="topTimeLeft">2018-12-18 星期二</div>
                <div class="topTimeRight">11：20：36</div>
            </div>
        </div>
        <div >
            <div  class="indexContent">
                <div class="indexContentTitle">云康达自助充值缴费系统</div>
                <div v-show="!isClick" class="indexContentClick">点击屏幕进行就诊卡充值</div>
            </div>
            <div class="indexBtn">
                <div v-show="isClick" @click="swingCard" class="swingCard">请&nbsp;刷&nbsp;卡</div>
            </div>
        </div>
    </div>
</template>
<script>
import logoImg from "../../assets/img/logo_img.png";
import top from "../../components/top";
import { setStore } from '@/util/store'
import { getAccount } from '@/api/app'
export default {
    name: 'index',
    components: {
        top,
    },
    data () {
        return {
            logoImg:logoImg,
            isClick:false,
            isSwingCard:false,
            form:{}
        }
    },
    methods:{
        // 点击屏幕
        goSwingCard(){
            this.isClick = true;
        },
        // 刷卡
        swingCard(){
            this.form={openId:'oO1_5wJ6kuhprcvTq0_p42aGGOFg',cardno:'111'};
            this.getAccount();
            // this.$router.push({
            //     path:'/initial'
            // })
        },
        //刷卡后回调
        getAccount(){
            getAccount(this.form).then(res => {
                setStore({ name: 'account', content: res.data.data,type:'session' });
                this.$router.push({
                    path:'/initial'
                })
            });
            return    
        }
    }
}
</script>
<style>
.container {
    height: 100%;
    width: 100%;
    background-image: url('../../assets/img/initial_page_bg.png');
    background-size: cover;
    background-position: top;
    position: relative;
}
.initTop ,.indexTop {
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content:space-between;
}
.indexTop {
    color: #ffffff;
    background-color: #36c3ca;
}
.topImg {
    overflow: hidden;
    padding-left: 20px;
}
.topTitle {
    height: 30px;
    line-height: 28px;
    display: flex;
    font-size: 20px;
    margin: 0 20px;
    color: #ffffff;
}
.topTime {
    height: 30px;
    line-height: 28px;
    display: flex;
    font-size: 14px;
    margin: 0 20px;
}
.indexContent {
    position: absolute;
    width: 100%;
    margin-top: 15%;
    text-align: center;
    color: #36c3ca;
}
.indexContentTitle {
    font-size: 50px;
}
.indexContentClick {
    font-size: 35px;
    margin-top: 5px;
}
.indexBtn {
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top: 30%;
}
.swingCard {
    margin: 0 auto;
    height: 50px;
    width: 120px;
    display: flex;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    background-color: #36c3ca;
    color: #ffffff;
    border-radius: 5px;
}
</style>

